<template>
  <div class="course-main">
    <div style="display: flex;">
      <div class="course-card" v-for="course in courseList.slice(0, 4)" :key="course.id" @click="goRoute(course.id)">
        <div class="card-container">
          <el-skeleton style="width: 100%" :loading="loading" animated :throttle="500">
            <template slot="template">
              <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <div
                  style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
                  <el-skeleton-item variant="text" style="margin-right: 16px;" />
                  <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
              </div>
            </template>
            <template>
              <el-card style="width: 100%;" :body-style="{ padding: '0px', margin: '0px' }" shadow="hover">
                <div style="border-bottom: 10px;">
                  <img :src="course.cover" class="image" />
                </div>
                <div
                  style="padding-left: 15px;margin-top: 0px;text-align: left; vertical-align: middle; font-size:medium;border-top: 1px; line-height: 50px;">
                  <div
                    style="display: inline-block; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    <b>{{ course.title }}</b>
                  </div>
                  <div class="view-and-like"
                    style="display: inline-block; float: right; margin-right: 5px; color: gray; font-size: small;">
                    {{ course.likes }}
                    <a-icon type="like" />
                    &nbsp;{{ course.views }}
                    <a-icon type="eye" />
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div>
    <div style="display: flex; margin-top: 25px; margin-bottom: 40px;">
      <div class="course-card" v-for="course in courseList.slice(4, 8)" :key="course.id" @click="goRoute(course.id)">
        <div class="card-container">
          <el-skeleton style="width: 100%" :loading="loading" animated :throttle="500">
            <template slot="template">
              <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <div
                  style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
                  <el-skeleton-item variant="text" style="margin-right: 16px;" />
                  <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
              </div>
            </template>
            <template>
              <el-card style="width: 100%;" :body-style="{ padding: '0px', margin: '0px' }" shadow="hover">
                <div style="border-bottom: 10px;">
                  <img :src="course.cover" class="image" />
                </div>
                <div
                  style="padding-left: 15px;margin-top: 0px;text-align: left; vertical-align: middle; font-size:medium;border-top: 1px; line-height: 50px;">
                  <div
                    style="display: inline-block; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    <b>{{ course.title }}</b>
                  </div>
                  <div class="view-and-like"
                    style="display: inline-block; float: right; margin-right: 5px; color: gray; font-size: small;">
                    {{ course.likes }}
                    <a-icon type="like" />
                    &nbsp;{{ course.views }}
                    <a-icon type="eye" />
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    courseList: [],
    loading: Boolean
  },
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
    }
  },
  mounted() { },
  methods: {
    goRoute(id) {
      this.$router.push({ path: '/route', query: { id: id } })
    },
  },
}
</script>

<style scoped>
.card-container {
  width: 90%;
  margin-left: 5%;
  cursor: pointer;
  transition: all 0.4s ease;
  /* height: 220px; */
}

.card-container:hover {
  box-shadow: 0 0 20px #409eff;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  /* height: 100px; */
}

.course-card {
  width: 25%;
  /* display: inline-block; */
  text-align: center;
}

.course-main {
  margin-top: 30px;
  display: inline-block;
  vertical-align: middle;
  width: 73%;
  background: transparent;
}
</style>